<template>
  <div>
    <el-card>
      <bread second="文章列表"></bread>
      <div class="headerBox">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="活动区域">
            <!-- 
              select  显示是：label   获取的是value     =》id值
             -->
            <el-select v-model="q.cate_id" placeholder="活动区域">
              <el-option
                v-for="item in artList"
                :key="item.id"
                :label="item.cate_name"
                :value="item.id"
              ></el-option> </el-select
            >===={{ q.cate_id }}
          </el-form-item>
          <el-form-item label="活动区域">
            <el-select v-model="q.state" placeholder="活动区域">
              <el-option label="已发布" value="已发布"></el-option>
              <el-option label="草稿" value="草稿"></el-option> </el-select
            >=={{ q.state }}
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
            <el-button type="default" @click="onReset">重置</el-button>
          </el-form-item>
        </el-form>

        <el-button size="mini" type="primary" @click="pubArt"
          >发布文章</el-button
        >
      </div>

      <!-- 表格 -->
      <el-table :data="list" style="width: 100%" stripe border>
        <el-table-column prop="title" label="文章标题" width="180">
          <template slot-scope="{ row }">
            <el-link @click="showDetail(row.id)" type="primary">{{
              row.title
            }}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="cate_name" label="分类" width="180">
        </el-table-column>
        <el-table-column label="发表时间">
          <template slot-scope="scope">
            {{ scope.row.pub_date | format }}
          </template>
        </el-table-column>
        <el-table-column prop="state" label="状态"></el-table-column>
        <el-table-column label="操作">
          <template>
            <el-button type="danger" size="mini">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 表格 -->

      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="q.pagenum"
        :page-sizes="[1, 2, 3, 5]"
        :page-size="q.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
    <!-- 

      详情对话框
     -->
    <!-- 文章详情的对话框 -->
    <el-dialog title="文章预览" :visible.sync="infoVisible" width="80%">
      <!-- 展示详情的 -->
      <art-info :infoData="infoData"></art-info>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="infoVisible = false">关 闭</el-button>
      </span>
    </el-dialog>

    <!-- 发布文章 -->
    <el-dialog fullscreen title="收货地址" :visible.sync="dialogFormVisible">
      <Artpub @closePubDia="closePubDia"></Artpub>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
           
<script>
import { getArtListApi, getArtInfoApi } from '@/api/art.js'
import { mapState } from 'vuex'
import artInfo from './components/ArtInfo.vue'
import Artpub from './components/Artpub.vue'
export default {
  name: '',
  components: {
    artInfo,
    Artpub,
  },
  data() {
    return {
      formInline: {
        user: '',
        region: '',
      },
      list: [],
      q: {
        pagenum: 1,
        pagesize: 1,
        cate_id: '',
        state: '',
      },
      total: 0,

      /* 筛选 */
      // chooseVal: '',
      // state: '',

      /* 详情 */
      infoVisible: false,
      infoData: {},

      /* 发布文章 */
      dialogFormVisible: false,
    }
  },
  created() {
    /* 
    获取文章数据列表
    1-封装api请求函数
    2-调用函数
    3-储存数据
     */
    //  2-获取文章列表 调用函数
    this.getList()
  },
  computed: {
    ...mapState('article', ['artList']),
  },
  methods: {
    /* 重置 */
    onReset() {
      /* 
      1、清空cate_id + state
      2、发送请求
       */
      this.q.cate_id = ''
      this.q.state = ''
      //  2-获取文章列表 调用函数
      this.getList()
    },
    onSubmit() {
      /* 
      1、更改q里面的字段到select
      2、发送请求
      
       */
      //  2-获取文章列表 调用函数
      this.getList()
    },

    async getList() {
      const res = await getArtListApi(this.q)
      console.log(res, 88877)
      //  3-储存数据
      this.list = res.data.data
      this.total = res.data.total
    },

    /* 分页 */
    handleSizeChange(val) {
      //  获取每页显示多少条
      console.log(`每页 ${val} 条`)
      this.q.pagesize = val
      this.getList() //  获取数据列表
    },
    handleCurrentChange(val) {
      //  获取当前页码数
      console.log(`当前页: ${val}`)
      this.q.pagenum = val
      this.getList() //  获取数据列表
    },

    /* 
    分页步骤
    1-先显示结构
    2-更改组件上的配置选项
    3-实践中处理函数获取新的数据
     */

    /* 显示详情 */
    async showDetail(id) {
      /* 
       1、显示对话框
       2、发送请求
       3、展示数据到对话框中
       */
      // 1、显示对话框
      this.infoVisible = true
      // 2、发送请求
      const res = await getArtInfoApi(id)
      console.log(res, 333)
      //  3、展示数据到对话框中
      this.infoData = res.data.data
    },

    /* 发布文章 */
    pubArt() {
      /* 
      1、显示对话框
      2、对话框中布局  并显示分类+校验
      3、图片上传
      4、发布文章 [发布文章按钮 + 存为草稿]
      5、关闭对话框
      6、更新数据
       */

      this.dialogFormVisible = true
    },
    closePubDia() {
      this.dialogFormVisible = false
      this.getList()
    },
  },
}
</script>
<style lang='less'  scoped>
.headerBox {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin: 20px 0;
}
</style>